<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>条件渲染指令</title>
    <style type="text/css">
        code { border: 1px solid #d1d1d1; background: #f0f0f0; }
    </style>
</head>
<body>
    
    <h3>条件渲染指令</h3>
    <a href="https://v3.cn.vuejs.org/guide/conditional.html">条件渲染</a>
    <ul>
        <li>使用 v-if 指令需要为其指定表达式 <code>v-if="expression"</code> </li>
        <li>使用 v-else-if 指令需要为其指定表达式 <code>v-else-if="expression"</code> </li>
        <li>使用 v-else 指令不需要表达式 <code>v-else</code> </li>
        <li>使用 v-show 指令需要为其指定表达式 <code>v-show="expression"</code></li>
    </ul>

    <hr>

    <!-- 根组件的挂载点 -->
    <div id="root">
        <div>
            <div class="age">
                <span>{{ name }}</span>
                是
                <span v-if="age<18">未成年人</span>
                <span v-else-if="age<40">青年人</span>
                <span v-else-if="age<65">中年人</span>
                <span v-else>老年人</span>
                <p v-show="age>18">欢迎{{ name }}</p>
            </div>
            <button v-on:click="change">随机修改年龄({{ age }})</button>

            <div class="task">
                <!-- 随机生成一个成绩，根据成绩显示 优秀、优良、良好、及格、待提高 -->
            </div>
         </div>
    </div>

    <script src="../scripts/vue@3.2.31.js" type="text/javascript"></script>

    <script type="text/javascript">
        const options = {
            data(){
                return {
                    name: '孙悟空',
                    age: 18
                }
            },
            methods: {
                change(){
                    this.age = ( Math.random() * 120 ) | 0 ;
                }
            }
        }
        const app = Vue.createApp( options );
        const root = app.mount( '#root' );
        console.log( root );
    </script>



</body>
</html>